@charset "UTF-8";

:root {
  --main-color: #408020;
  --accent-color: #BF6A7A;
  --dark-main-color: #000000;/*#225511;*/
  --text-bright-color: #eeeeee;
  --middle-width: 800px;
}

body {
  margin: 0;
  font-family: 'メイリオ',
     'Hiragino Kaku Gothic Pro',
     sans-serif;
}

header {
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  /*background-color: var(--dark-main-color);*/
  color: #111111;
}

.headA u1 {
  margin: 0;
  padding: 0;
  list-style: none;
}

.headA a {
  display: block;
  padding: 15px;
  color: inherit;
  font-size: 15px;
  text-decoration: none;
}

.headA a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.headB u1 {
  margin: 0;
  padding: 0;
  list-style: none;
}

.headB a {
  display: block;
  padding: 15px;
  color: inherit;
  font-size: 12px;
  text-decoration: none;
}

.headB a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}


@media (min-width: 768px) {
  header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
  }

  .headA u1 {
    display: flex;
  }

  .headB u1 {
    display: flex;
  }
}


.conA {
  display: flex;
  justify-content: flex-end;
  vertical-align: flex-end;
  height: 81vh;
  min-height: 450px;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0)
    ), url(maizuru.jpg);
  background-position: center;
  background-size: cover;
  color:rgba(70, 70, 70, 0.7);
}

.conA h4 {
  text-align: center;
  vertical-aligh: center;
}

.conB {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20vh;
  min-height: 76px;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)
    ), url(maizuru.jpg);
  background-position: center;
  background-size: cover;
  color:rgba(30, 60, 20, 0.7);
  /*color: var(--text-bright-color);*/
  text-align: center;
}

.conC .container {
  max-width: 800px;
  max-width: var(--middle-width);
  margin-left: auto;
  margin-right: auto;
  padding: 40px 10px;
  align-items: center;
text-align: justify;
text-justify: inter-ideograph;
}

.conC h1 {
  padding-left: 0.5rem;
  border-left: solid 0.75rem #BF6A7A;
  font-size: 1.5rem;
}

.conC h2 {
  padding-left: 0.5rem;
  border-left: solid 0.75rem #333333;
  font-size: 1.2rem;
}

.conC h3 {
  padding-left: 0.5rem;
  font-size: 1.0rem;
}

.conC h4 {
  font-weight: normal;
}

.conC h5 {
  font-weight: normal;
  font-size: 0.8rem;
}

.conC h6 {
  font-weight: bold;
  font-size: 0.8rem;
  line-height: 1.4rem;
  text-align: center;
}


.image_size_m{
  width: 400px;
  height: auto;

}


footer {
  color: #fff;
  color: var(--text-bright-color);
  background-color: var(--dark-main-color);
  /*background-color: rgb(30, 120, 30);*/
  /*background-image: url(ainu.png);*/
  background-size: 30% auto;
}

footer .container{
  padding: 40px 20px;
}

.footA {
  text-align: center;
}

.footA h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
  letter-spacing: 0.2rm;
}

.footA p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.footB {
  font-size: 14px;
  text-align: right;
}

.footC {
  font-size: 12px;
  text-align: center;
}



.box1{
  font:"Arial";
  font-weight: bold;
  padding-right:20px;
  padding-left:20px;
  line-height:1em;
  text-align: center
}

.box2{
  background:green;
  border-radius:10px;
}

.box3{
  background:red;
  border-radius:10px;
}

.box4{
  color: RGB(50,50,50);
  text-align: justify; 

}

.textbox_text{
  font:"Arial";
  font-weight: normal;
  text-align: justify;
}

.decade
{
  background:gray;
}

.btn-mouseover:hover + .mouseover__box{
  display: block;
}
.mouseover__box:hover{
  display: block;
}
.mouseover__box{
  z-index: 3;
  display: none;
  position: absolute;
  top:20;
  left:0;
  width: 800px;
  padding: 15px;
  font-size: 13px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
}